<template>
  <div class="my">
    <!-- 个人信息 -->
    <div class="info">
      <van-image
        class="myimg"
        round
        width="90"
        height="90"
        fit="cover"
        :src="userInfo.photo"
      />
      <div class="text">
        <div class="name">{{ userInfo.name }}</div>
        <div class="birth">{{ userInfo.birthday }}</div>
      </div>
    </div>
    <!-- 我的收藏 -->
    <van-grid class="mygrid" :border="false" :column-num="3" icon-size="30px">
      <van-grid-item icon="newspaper-o" text="我的作品" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="tosend" text="阅读历史" />
    </van-grid>

    <!-- 其他信息 -->
    <van-cell-group>
      <van-cell title="编辑资料" to="/my/edit" is-link icon="edit" />
      <van-cell title="小智同学" to="/my/zhi" is-link icon="chat-o" />
      <van-cell title="系统设置" is-link icon="setting-o" />
      <van-cell title="退出登录" @click="logout" is-link icon="info-o" />
    </van-cell-group>
    
  </div>
</template>

<script>
import { getUserInfoApi } from '@/api'
export default {
  data() {
    return {
      // userInfo: {},
    };
  },
  computed: {
    userInfo: function() {
      return this.$store.state.userInfo
    }
  },
  methods: {
    logout() {
      this.$store.commit('logout')
      this.$router.push('/login')
      this.$toast.success('退出成功')
    }
  },
  created() {
    //  const res = await getUserInfoApi() 
    //  this.userInfo = res.data.data
    //  this.$store.commit('setUserInfo', res.data.data)
    this.$store.dispatch('setUserInfo')
  }
};
</script>

<style lang="less">
.my {
  .info {
    height: 120px;
    background-color: #3296fa;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;
    .myimg {
      margin: 0 20px;
    }
    .text {
      .name {
        font-weight: 700;
        margin-bottom: 10px;
      }
      .birth {
        background: #fff;
        color: #3296fa;
        font-size: 14px;
      }
    }
  }
  .mygrid {
    .van-icon-newspaper-o {
      color: blue;
    }
    .van-icon-star-o {
      color: red;
    }
    .van-icon-tosend {
      color: orange;
    }
  }
}
</style>